<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" type="text/css" />
		<script src="<%=request.getContextPath()%>/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-heima-0.0.1.js" ></script>
		<!-- 引入自定义css文件 style.css -->
		<style>
		</style>
		<script>
			$(function(){
				//发送AJAX请求,返回所有的购物车数据
				HM.ajax("<%=request.getContextPath()%>/cartServlet?method=showCart","",function(data){
					if(data.code==1){
						//取出JSON中的数据
						//获取总价格
						$("#total").html(data.obj.total);
						var cart = $("#cart");
						//取出购物项
						var item = data.obj.itemMap;
						$.each(item, function(index,ele) {
							//ele取出购物项
							  var str = "<tr class=\"active\">\n" +
							  "\t\t\t\t\t\t\t\t\t<td width=\"7%\">\n" +
							  "\t\t\t\t\t\t\t\t\t\t<input type=\"checkbox\" class=\"itemSelect\" onchange=\"editCar1(this)\" value=\""+ele.product.pid+"\">\n" +
							  "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td width=\"60\" width=\"40%\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t<input type=\"hidden\" name=\"id\" value=\"22\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t<img src=\"<%=request.getContextPath()%>/"+ele.product.pimage+"\" width=\"70\" height=\"60\">\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td width=\"30%\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t<a target=\"_blank\"> "+ele.product.pname+"...</a>\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td width=\"20%\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t￥"+ele.product.shop_price+"\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td width=\"10%\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t<input type=\"number\" min=\"1\" id=\"count\" onchange=\"editCar2(this,'"+ele.product.pid+"')\" value=\""+ele.count+"\">\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td width=\"13%\">\n" +
						      "\t\t\t\t\t\t\t\t\t\t￥<span id=\"subtotal"+ele.product.pid+"\" class=\"subtotal\">"+ele.subTotal+"</span>\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t\t<td>\n" +
						      "\t\t\t\t\t\t\t\t\t\t<a onclick=\"removeItem('"+ele.product.pid+"')\" href=\"javascript:;\" class=\"delete\">删除</a>\n" +
						      "\t\t\t\t\t\t\t\t\t</td>\n" +
						      "\t\t\t\t\t\t\t\t</tr>\n" +
						      "\t\t\t\t\t\t\t\t";
						      cart.append(str);
						});
					}
				});
			});
			//移除购物项函数
			function removeItem(pid){
			   if(confirm("确定要删除吗?")){
			   	 //发送AJAX请求,提交商品主键
			   	 HM.ajax("<%=request.getContextPath()%>/cartServlet?method=removeItem","pid="+pid,function(data){
			   	 	if(data.code==1){
			   	 		//重写加载当前页面
			   	 		location.reload();
			   	 	}
			   	 });
			   }
			}
			//清空购物车函数
			function clearItem(){
				if(confirm("确定清空购物车吗?")){
					//发送AJAX请求
					HM.ajax("<%=request.getContextPath()%>/cartServlet?method=clearItem","",function(data){
						if(data.code==1){
			   	 		//重写加载当前页面
			   	 		location.reload();
			   	 	  }
					});
				}
			}
			//选中商品
			function editCar1(a) {
				var x = a.value;
				$("#zong").prop("checked",false);
				if(a.checked==true){
					HM.ajax("<%=request.getContextPath()%>/cartServlet","method=addRCarts&pid="+x+"&style=add",function(data){
						$("#total").html(data.obj.total);
						$("#total1").html(data.obj.total1);
					});
				}else {
					HM.ajax("<%=request.getContextPath()%>/cartServlet","method=addRCarts&pid="+x+"&style=cle",function(data){
						$("#total").html(data.obj.total);
						$("#total1").html(data.obj.total1);
					});
				}
			}
			function editCar2(a,b) {
				var count = a.value;
				var pid = ""+b;
				HM.ajax("<%=request.getContextPath()%>/cartServlet","method=editCart&pid="+pid+"&count="+count,function(data){
					if(data.code==1){
						$("#total").html(data.obj.total);
						$("#total1").html(data.obj.total1);
						$("#subtotal"+pid).html(data.obj.subtotal);

					}
				});
			}
			function selectAll(a){
				$(".itemSelect").prop("checked",$("#zong").prop("checked"));
				if(a.checked==true) {
					HM.ajax("<%=request.getContextPath()%>/cartServlet", "method=selectAll", function (data) {
						if (data.code == 1) {
							$("#total").html(data.obj.total);
							$("#total1").html(data.obj.total1);
						}
					});
				}else{location.reload();}
			}
		</script>
	</head>

	<body>
		<div class="container-fluid" style="max-width: 1370px;">
			<!--头部-->
			<div id="header" style="min-height: 130px;"><jsp:include page="/header.jsp"/></div>
			<form action="<%=request.getContextPath()%>/orderServlet" method="post">
			<input type="hidden" name="method" value="submitOrder">
			<div class="container" style="min-height: 441px;">
				<div class="row">
					<div style="margin:0 auto; margin-top:10px;width:950px;">
						<strong style="font-size:16px;margin:5px 0;">购物车详情</strong>
						<table class="table table-bordered">
							<tbody id="cart">
								<tr class="warning">
									<th>全选<input type="checkbox" id="zong" onchange="selectAll(this)"></th>
									<th>图片</th>
									<th>商品</th>
									<th>价格</th>
									<th>数量</th>
									<th>小计</th>
									<th>操作</th>
								</tr>
								
							</tbody>
						</table>
					</div>
				</div>
	
				<div style="margin-right:130px;">
					<div style="text-align:right;">
						选中商品金额: <strong style="color:#ff6600;"><span id="total1">0</span>元</strong>    商品总金额: <strong style="color:#ff6600;"><span id="total">0</span>元</strong>
					</div>
					<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
						<a onclick="clearItem()" href="javascript:;" id="clear" class="clear">清空购物车</a>
						<a href="javascript:;">

							<input type="submit" width="100" value="提交订单" id="submit" border="0" style="background-color:#CD062D;height:35px;width:100px;color:white;">

						</a>
					</div>
				</div>
			</div>
			</form>
			<!--尾部-->
			<div id="footer"  style="min-height: 203px;"><jsp:include page="/foot.jsp" /></div>
		</div>
	</body>
</html>